<template>
  <div class="box">
    <p class="title">
      订单管理
    </p>
    <div class="search-wrap col-md-12">
      <div class="form-inline">
        <div class="form-group">
          <select class="form-control">
            <option value="productId">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">按订单号查询</font>
              </font>
            </option>
            
          </select>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" v-model="orderNo" placeholder="关键词" />
        </div>
        <button type="button" class="btn btn-default">
          <font style="vertical-align: inherit;">
            <font style="vertical-align: inherit;" @click="search">查询</font>
          </font>
        </button>
      </div>
    </div>
    <el-table :data="orderList" stripe style="width: 100%;margin-top:50px;">
      <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
      <el-table-column prop="receiverName" label="收件人"></el-table-column>
      <el-table-column prop="statusDesc" label="订单状态"></el-table-column>
      <el-table-column label="订单总价">
        <template slot-scope="scope">￥{{scope.row.payment}}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope"><router-link :to="{path:'./detail',query:{orderNo:scope.row.orderNo}}">查看</router-link></template>
        
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total"
      v-show="sdd"
    ></el-pagination>
  </div>
</template>

<script>
import { orderList } from "@/request/http";
import { orderPage } from "@/request/http";
import { search } from "@/request/http";
export default {
  data() {
    return {
      orderList: [],
      currentPage3: 1,
      pageNum: 1,
      orderNo:'',
      sdd:true,
      total:''
    };
  },
  methods: {
    getData() {
      orderList().then(res => {
        console.log(res.data.data.list);
        this.orderList = res.data.data.list;
        this.total=res.data.data.total
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      orderPage(this.pageNum).then(data => {
        console.log(data.data.data.list);
        this.orderList = data.data.data.list;
      }),
        console.log(`当前页: ${val}`);
    },
    search(){
        const sea={
            pageNum:this.pageNum,
            orderNo:this.orderNo
        }
        search(sea).then((res)=>{
            console.log(res)
            this.orderList=res.data.data.list
            if(this.orderList.length<2){
                this.sdd=false
            }
        })
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  .title {
    width: 100%;
    height: 8%;
    font-size: 40px;
    .btn {
      width: 10%;
      height: 60%;
      float: right;
    }
  }
  .form-inline {
    width: 100%;
    height: 15%;
    display: flex;
    .form-group {
      display: block;
      margin-right: 30px;
    }
  }
}
</style>